<!--
 * @description 卡片组件
 * @author dumeng
 * @date 2022/11/27
 -->
<template>
  <div
    v-if="list.length > 0"
    :id="isInitData ? option.id :'cardComp' "
    class="card-comp-page"
    :style="{'padding-left': spacing,'padding-right': spacing, 'margin-top': top }"
  >
    <cell-title
      v-if="(isShowModuleName || option.isMore === '1')"
      :title="moduleName"
      :hide-desc="option.isMore === '2'"
      :option="option"
      :style="{
        'background-color': backgroundColor,
        'border-radius':
          radiusSize+ ' ' + radiusSize + ' 0 0'
      }"
    />
    <div
      class="swiper"
      :style="{
        'border-radius':
          !isShowModuleName && option.isMore === '2' ? radiusSize : '0 0 '+ radiusSize+ ' ' + radiusSize
      }"
    >
      <div class="swiper-wrapper">
        <div v-for="item in list" :id="item.id" :key="item.id" class="swiper-slide">
          <div class="item-img" :style="{height: imgHeight}">
            <label-comp
              v-if="(option.resource === 'hd' || option.resource === 'zb') && labelObj!==undefined"
              :label-list="item.labelList"
              class-name="my-tag"
            />
            <img
              :src="setImgPath(getMapping(item, 'imgId'), getMapping(item, 'imgUrl'))"
              :style="{'object-fit': imgType, 'height': imgHeight}"
              alt=""
            >
          </div>
          <div class="item-bottom">
            <div class="item-title etc">
              {{ isInitData ? getMapping(item, 'title') : item.title }}
            </div>
            <div
              v-if="showSubtitle"
              class="item-desc"
              v-html="isInitData ? getMapping(item, 'subTitle') : item.subTitle"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import mixins from './../mixins'
import cardMixins from './mixins'
import Swiper from 'swiper/swiper-bundle.min.js'
import 'swiper/swiper-bundle.min.css'
import { v4 as uuidv4 } from 'uuid'
import CellTitle from '@/components/CustomPage/apps/widget/characters/cellTitle'
import LabelComp from '@/components/CustomPage/apps/widget/labelComp'

export default {
  name: 'CardComp',
  components: {
    CellTitle,
    LabelComp
  },
  mixins: [mixins, cardMixins],
  props: {
    option: {
      type: Object,
      default: {}
    },
    isInitData: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      list: [
        {
          carouselImg: '',
          carouselImgUrl: '',
          id: uuidv4(),
          title: '标题',
          subTitle: '副标题'
        },
        {
          carouselImg: '',
          carouselImgUrl: '',
          id: uuidv4(),
          title: '标题',
          subTitle: '副标题'
        },
        {
          carouselImg: '',
          carouselImgUrl: '',
          id: uuidv4(),
          title: '标题',
          subTitle: '副标题'
        },
        {
          carouselImg: '',
          carouselImgUrl: '',
          id: uuidv4(),
          title: '标题',
          subTitle: '副标题'
        }
      ],
      pageSize: '',
      labelObj: undefined
    }
  },
  computed: {

  },
  async mounted() {
    this.pageSize = this.option.number
    if (this.isInitData) {
      if (this.option.resource === 'hd' || this.option.resource === 'zb') {
        this.labelObj = await this.getLabelList()
      }
      await this.initData()
    } else {
      this.$nextTick(() => {
        this.initSwiper()
      })
    }
  },
  methods: {
    setData(result) {
      let rows = []
      if (Object.prototype.toString.call(result.cardComp?.data) === '[object Array]') {
        rows = result.cardComp?.data || []
      } else {
        rows = result.cardComp?.data.rows || []
      }
      if ((this.option.resource === 'hd' || this.option.resource === 'zb') && this.labelObj !== undefined) {
        this.setLabel(rows, 'list')
      } else {
        this.list = rows
      }
      this.$nextTick(() => {
        this.initSwiper()
      })
    },
    initSwiper() {
      const ths = this
      const options = {
        pagination: {
          el: ` .swiper-pagination`
        },
        autoplay: {
          delay: ths.isAutoPlay ? ths.delayTime : 0
        },
        loop: ths.loop,
        observer: true,
        observeParents: true,
        on: {
          click: function(e) {
            // 后台管理不能跳转
            return
            const id = e.clickedSlide.getAttribute('id')
            if (!id) {
              return
            }
            const info = ths.list.find(item => {
              return item.id === id
            })
          }
        }
      }
      if (!ths.isAutoPlay) {
        options['autoplay'] = false
      }
      this.swiper = new Swiper(this.isInitData ? `#${this.option.id} .swiper` : '#cardComp .swiper', options)
    }
  }
}
</script>

<style lang="scss">
@import '@/styles/utility/rem.scss';

.card-comp-page {
  width: rem(750);

  .swiper {
    width: 100%;

    .swiper-slide {
      width: 100%;
      border-radius: 0 0 rem(16) rem(16);

      .item-img {
        display: block;
        width: 100%;
        position: relative;

        > img {
          display: block;
          height: 100%;
          width: 100%;
          border-radius: rem(16) rem(16) 0 0;
          background-color: #bbb;
        }
      }

      .item-bottom {
        background-color: #fff;
        padding-top: rem(26);
        padding-bottom: rem(26);
        padding-left: rem(20);
        border-radius: 0 0 rem(16) rem(16);

        .item-title {
          font-size: rem(30);
          font-family: PingFang SC Medium, PingFang SC Medium-Medium;
          font-weight: bold;
          text-align: left;
          color: #333333;
        }

        .item-desc {
          font-size: rem(26);
          font-family: PingFang SC Regular, PingFang SC Regular-Regular;
          font-weight: 400;
          text-align: left;
          color: #999999;
          margin-top: rem(18);
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;

          p {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }
  }
}
</style>
